<template>
  <div class="recommend">
    <header>
      <h1 @click="jump_index()">干货集中营</h1>
      <p>每日分享妹子图 和 技术干货，还有供大家中午休息的休闲视频</p>
      <img src="../images/work.png" alt />
    </header>
    <main ref="main">
      <h2 v-if="!des_date_flag&recommend_flag">{{recommend_data[0].title}}</h2>
      <h2 v-if="des_date_flag">{{des_date_data.title}}</h2>
      <div class="select" v-show="recommend_flag">
        <Select
          v-model="model1"
          :label-in-value="true"
          @on-change="select_change"
          style="width:200px"
        >
          <Option
            v-for="(item,index) in new_dateList"
            :value="item.value"
            :key="item.value"
          >{{ item.label }}</Option>
        </Select>
      </div>
      <div class="list" v-if="!des_date_flag&recommend_flag" v-html="recommend_data[0].content"></div>
      <div class="list" v-if="des_date_flag" v-html="des_date_data.content"></div>
    </main>
    <v-footer-nav></v-footer-nav>
    <v-load v-show="load_flag"></v-load>
    <v-back-top></v-back-top>
  </div>
</template>
<script>
import { mapState } from "vuex";
const VFooterNav = () => import("../components/footer_nav.vue");
const vLoad = () => import("../components/load.vue");
const vBackTop = () => import("../components/backTop.vue");
import "../js/date.js";
export default {
  components: {
    VFooterNav,
    vBackTop,
    vLoad
  },
  data() {
    return {
      model1: "0"
    };
  },
  computed: {
    ...mapState("load", ["load_flag"]),
    ...mapState("recommend", ["recommend_data", "recommend_flag"]),
    ...mapState("date", [
      "date_data",
      "date_flag",
      "des_date_data",
      "des_date_flag"
    ]),
    time() {
      return new Date().dateFormat(
        new Date(this.recommend_data[0].publishedAt),
        "mm月dd日"
      );
    },
    new_dateList() {
      return this.date_data;
    }
  },
  created() {
    this.$store.dispatch("recommend/getRecommendData", { count: 1, page: 1 });
    this.$store.dispatch("date/getDateData", {});
  },
  updated() {
    if (this.recommend_flag == true) {
     let img_list = this.$refs.main.getElementsByTagName("img");
      
      for (let i = 0; i < img_list.length; i++) {
        img_list[i].src = "https://images.weserv.nl/?url=" + img_list[i].src;
      }
    }
  },
  methods: {
    jump_index() {
      this.$router.push("/index");
    },
    select_change(data) {
      let year = new Date(data.label).getFullYear();
      let month = new Date(data.label).getMonth() + 1;
      let day = new Date(data.label).getDate();
      this.$store.dispatch("date/getDesDateData", {
        year: year,
        month: month,
        day: day
      });
    }
  }
};
</script>
<style>
.recommend .list h3 {
  text-align: center;
  font-size: 0.48rem;
  font-weight: normal;
  line-height: 1.5rem;
}
.recommend .list > ul > li {
  font-size: 0.3rem;
  line-height: 0.5rem;
  margin-bottom: 0.8rem;
}
.recommend .list > ul > li > ul > li {
  padding: 0 !important;
}
</style>
<style lang="scss" scoped>
.recommend {
  header {
    width: 100%;
    padding: 0.2rem 0;
    background: url(../images/bg.png);
    h1 {
      font-size: 0.46rem;
      color: #444;
      font-weight: normal;
      text-align: center;
      line-height: 0.68rem;
    }
    p {
      width: 80%;
      text-align: center;
      font-size: 0.26rem;
      color: #444;
      margin: auto;
      line-height: 0.4rem;
    }
    img {
      width: 40%;
      margin: auto;
    }
  }
  main {
    padding: 0.4rem;
    padding-top: 0;
    padding-bottom: 1.5rem;
    h2 {
      text-align: center;
      font-size: 0.46rem;
      color: #222;
      font-weight: normal;
      line-height: 1rem;
    }
    .select {
      text-align: center;
      line-height: 1rem;
      padding-bottom: 0.3rem;
    }
  }
}
</style>